<template>
  <div class="dd">
    <el-form :model="userForm" :rules="rules" style="max-width: 600px">
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="userForm.phone" :prefix-icon="Iphone"/>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input type="password" show-password v-model="userForm.password" :prefix-icon="Lock"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="password1" >
        <el-input type="password" show-password v-model="userForm.password1" :prefix-icon="Lock"/>
      </el-form-item>
      <el-form-item>
        <el-checkbox class="checkbox" v-model="isChecked">
          我已阅读并同意<a href="javascript:void(0)" style="text-decoration: none;color: #b2b2b2">《同城旅行协议服务》</a>
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <p><a href="javascript:void(0)" @click="yz()" class="a1">同意服务条款并注册</a></p>
      </el-form-item>
    </el-form>
    <div class="d1">
      <p class="pp">Copyright&nbsp;&copy;&nbsp;2002-2025 版权所有 同程网络科技股份有限公司 苏ICP证B2-20100204</p>
    </div>
  </div>
</template>

<script setup>
import {sendCode} from "@/api/wzz/vue3.js";
import {pd} from "@/api/wzz/vue3.js";
import { ref } from 'vue'//引入ref
import { Iphone } from '@element-plus/icons-vue'//引入图标
import { Lock } from '@element-plus/icons-vue'//引入图标
import { useCounterStore}  from "@/stores/counter.js";//引入pinia
import router from "@/router/index.js";//引入路由
const store = useCounterStore();//调用pinia
const userForm=ref({//定义表单数据
  phone:'',
  password:'',
  password1:'',
})
const isChecked=ref(false)//定义复选框

const yz= async ()=>{//点击发送验证码
  if (isChecked.value != true){
    ElMessage({
      message: '请勾选同意',
      type: 'error',
    })
  }else {
    if (userForm.value.phone == '' || userForm.value.password == '' || userForm.value.password1 == '') {
      ElMessage({
        message: '请输入完整信息',
        type: 'warning',
      })
    } else {
      let res = await pd(userForm.value.phone)
      console.log(res.data.code)
      if (res.data.code == 222) {
        await sendCode(userForm.value.phone)
        console.log('开始注册请求')
        store.addTz()
        router.push('/register2')//跳转到注册页面2
      } else {
        alert('手机号已存在')
      }
    }
  }
}

store.setUserForm(userForm.value)//将userForm存入pinia
const rules ={//表单验证
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
    ],
    password1: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      { validator: (rule, value, callback) => {
        if (value !== userForm.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }, trigger: 'blur' }
    ]
}
</script>

<style scoped>
.dd{
  height: 400px;
}
.el-form{
  margin:0 auto;
  width: 400px;
  padding-right: 70px;
}
ul{
  display: flex;
  justify-content:center;
  list-style: none;
  margin-left: 240px;
}
.p1{
  width: 32px;
  height: 16px;
  font-size: 10px;
  background-color: #CCCCCC;
  text-align: center;
  color: #fff;
  margin-left: 2px;
  line-height: 16px;
}
.p2{
  width: 56px;
  height: 20px;
  font-size: 12px;
  line-height: 16px;
  color: #999999;
}
.checkbox{
  margin-left: 68px;
}
.d1{
  width: 80%;
  height: 50px;
  border-top: 1px solid #E2E2E2;
  margin: 0 auto;
  margin-top: 145px;
}
.a1{
  display: inline-block;
  width: 220px;
  height: 42px;
  text-align: center;
  background-color: #ff6257;
  border-radius: 3px;
  text-decoration: none;
  line-height: 42px;
  color: #fff;
  font-size: 16px;
  margin-left: 65px;
}
.pp{
  width: 480px;
  line-height: 50px;
  color: #999999;
  font-size: 13px;
  margin:0 auto;
}
</style>